<template>
  <div style="padding-top: 60px; margin-bottom: 50px;background-color: RGB(246, 246, 246);" class="app-container">
    <div class="info">
      <div class="info-item" :span="6">
        <p>
          <span>今日订单</span>
          <span style="font-size: 25px" class="tip-right">{{indexInfo.allNum || 0}}</span>
        </p>
        <p>
          <span> <i style="color: red" class="el-icon-s-platform"></i> </span>
          <!-- <span style="margin-top: 10px;" class="tip-right red">待审批：{{indexInfo.proposalCountLoad || 0}}</span> -->
        </p>
      </div>
      <div class="info-item" :span="6" >
        <p>
          <span>未接单数量</span>
          <span style="font-size: 25px" class="tip-right">{{indexInfo.callNum || 0}}</span>
        </p>
        <p>
          <span> <i style="color:#13ce66;" class="el-icon-s-management"></i> </span>
<!--          <span style="margin-top: 10px;" class="tip-right red">待学习：0</span>-->
        </p>
      </div>
      <div class="info-item" :span="6">
        <p>
          <span>已完成订单</span>
          <span style="font-size: 25px" class="tip-right">{{indexInfo.finishNum || 0}}</span>
        </p>
        <p>
          <span> <i style="color: #FEC171 " class="el-icon-s-claim"></i> </span>
<!--          <span style="margin-top: 10px;" class="tip-right red">未读：0</span>-->
        </p>
      </div>
      <div class="info-item" :span="6">
        <p>
          <span>司机数量</span>
          <span style="font-size: 25px" class="tip-right">{{driverArr.length || 0}}</span>
        </p>
        <p>
          <span> <i style="color: lightskyblue" class="el-icon-s-flag"></i> </span>
<!--          <span style="margin-top: 10px;" class="tip-right red">未读：0</span>-->
        </p>
      </div>
    </div>
    <div class="map_container">
      <div class="driver" v-if="sysUser.isAdmin">
        <el-select v-model="currentArea" @change="changeFrance($event)" placeholder="请选择">
          <el-option
            v-for="item in areaList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
       <div class="map" ref="qqMap" style="width:100%" id="tx_map_d"></div>
    </div>
  </div>

</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
// import {getDrivers} from "@/api/business/driverinfo";
// import {getCurOrderView} from "@/api/business/orderinfo";
// import { page as getAllFranchisee } from "@/api/business/franchiseeinfo";
import router from '@/router';
import { mapGetters } from 'vuex'
export default {
  name: "Index",
  computed: {
    ...mapGetters(["sysUser"]),
  },
  data() {
    return {
      avatarUrl: require('@/assets/images/avatar.svg'),
      avatarFemale: require('@/assets/images/avatarFemale.svg'),
      loading:false,
      currentArea:'',
      page:{
        pageNum:1,
        pageSize:10,
        total:0,
      },
      driverArr:[],
      latitude:37.665101,
      longitude: 114.403596,
      indexInfo:{},
      areaList: [],
      qqMap:null,
      driverMarker:null
    }
  },
  mounted() {
    this.$nextTick(() => {
      // this.initPage()
      // this.initMap();
    })
  },
  methods: {
    changeFrance(item){
      let ck= this.areaList.filter(i=>{
        return i.id==item
      })[0]
      if(ck){
        this.latitude = ck.latitude
        this.longitude = ck.longitude
        this.qqMap.setCenter(new TMap.LatLng(ck.latitude,ck.longitude))
        console.log(this.qqMap)
      }

      getDrivers(item).then(res=>{
          this.driverArr= res.data
          this.addDriver()
      })
    },
    initPage(){
      getCurOrderView().then(res=>{
        this.indexInfo=res.data
      })
      getAllFranchisee({
        pageSize: 10000,
        pageNo: 1,
        search: {
          status: 2
        }
      }).then(res => {
        this.areaList = res.data.list
        if(this.sysUser.isAdmin){
          this.changeFrance(null)
        }else{
          this.changeFrance(this.sysUser.franchiseeId)
        }
      })
      // getDrivers(null).then(res=>{
      //     this.driverArr= res.data
      //     this.initMap()
      // })
    },
    addDriver(){
      this.driverMarker.setGeometries([]);
      let datas =[]
      this.driverArr.forEach(item=>{
        datas.push({
          styleId: item.sex==1?'man':'female',
          position: new TMap.LatLng(item.latitude,item.longitude),
          content: item.driverName+item.jobNumber,
          clickContent:{name:item.driverName,jobNumber:item.jobNumber,mobile:item.mobile,workFlag:item.workFlag}
        })
      })
      this.driverMarker.add(datas)
    },
    initMap(){
      this.qqMap = new TMap.Map((this.$refs.qqMap), {
        center: new TMap.LatLng(this.latitude,this.longitude),//设置地图中心点坐标
        zoom: 15,   //设置地图缩放级别
        pitch: 43.5,   //设置地图旋转角度
      });

      this.driverMarker = new TMap.MultiMarker({
          map: this.qqMap,
          styles: {
            man: new TMap.MarkerStyle({
              // 点标注的相关样式
              width: 46, // 宽度
              height: 46, // 高度
              anchor: { x: 17, y: 23 }, // 标注点图片的锚点位置
              src: this.avatarUrl, // 标注点图片url或base64地址
              color: '#e6650e', // 标注点文本颜色
              size: 16, // 标注点文本文字大小
              direction: 'bottom', // 标注点文本文字相对于标注点图片的方位
              offset: { x: 0, y: 8 }, // 标注点文本文字基于direction方位的偏移属性
              strokeColor: '#fff', // 标注点文本描边颜色
              strokeWidth: 2, // 标注点文本描边宽度
            }),
            female: new TMap.MarkerStyle({
              width: 46,
              height: 46,
              anchor: { x: 36, y: 32 },
              src: this.avatarFemale,
              color: '#088632',
              size: 16,
              direction: 'bottom',
              strokeColor: '#fff',
              offset: { x: 0, y: 8 },
              strokeWidth: 2,
            }),
          },
          enableCollision: false, // 开启碰撞
          geometries: new Array()
      });
      var infoWindow = new TMap.InfoWindow({
          map: this.qqMap,
          position: new TMap.LatLng(39.984104, 116.307503),
          offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素
      });
      infoWindow.close();//初始关闭信息窗关闭
      //监听标注点击事件
      this.driverMarker.on("click", (evt)=> {
          //设置infoWindow
          infoWindow.open(); //打开信息窗
          infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
          const logo = require('@/assets/logo/logo.png');
          const avatar = require('@/assets/images/avatar.png');
          const closeWindow = require('@/assets/images/close_window.png');
          let content=`<div class="info_window"><div class="info_window_top">
          <div class="people_type"><img src="${logo}"><span>${evt.geometry.clickContent.name}</span>
          </div></div><div class="info_window_content">
          <img src="${avatar}" class="avatar"><div><div>工号：${evt.geometry.clickContent.jobNumber}</div>
          <div>联系电话：${evt.geometry.clickContent.mobile}</div>
          <div>当前状态: ${evt.geometry.clickContent.workFlag==true?"在岗":"离岗"}</div></div></div></div>`
          infoWindow.setContent(content);//设置信息窗内容
          // infoWindow.setContent(evt.geometry.position.toString());//设置信息窗内容
      })

    },
  }
};
</script>




<style scoped lang="scss">
.map_container{
  margin-top: 15px;
  background: #fff;
  position: relative;

  .driver{
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 999900;

  }
}
.map{
  width:100%
}
.info {
  padding: 10px;
  border: 1px solid #efefef;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  .info-item {
    width: 24%;
    background: #ffffff;
    border-radius: 5px;
    padding: 20px;
    cursor: pointer;
    p {
      .tip-right {
        float: right;
      }
      i {
        font-size: 40px;
      }
    }
  }
}
.red {
  color: red;
}
.chart-box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  >div {
    width: 32%;
  }
  h3 {
    background: #ffffff;
    margin: 0;
    padding: 20px 20px 0 20px;
  }
  .chart1 {
    width: 100%;
    height: 300px;
    background: #ffffff;
  }
}
</style>

